<template>
  <div>
    <div class="box" v-if="type=='text'">
        <textarea v-model="text" v-maxLength:text="maxlength" name="" id="" cols="30" rows="10"></textarea>
      <span class="span"></span>
    </div>
    <div class="box" v-if="type=='input'">
      <input type="text" v-model="intpt" v-maxLength:input="maxlength" />
      <span class="span"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intpt: "",
      text: ""
    };
  },
  props: {
    maxlength: {
      type: Number,
      default: 0
    },
    type:{
        type:String,
        default:'text'
    }
  },
  directives: {
    maxLength: {
      inserted(el, binding) {
        el.nextElementSibling.innerHTML = `0/${binding.value}`;
      },
      update(el, binding,vnode) {
          el.nextElementSibling.innerHTML=`${el.value.length}/${binding.value}`
          el.addEventListener('input',ele=>{
              let val=ele.target.value.slice(0,binding.value)
            el.value=val
            console.log(vnode.context[binding.arg]);
            
            vnode.context[binding.arg]=el.value
            if(el.value.length==binding.value){
                el.style.color='red'
            }else{
                el.style.color='black'
            }
          })
      }
    }
  }
};
</script>

<style scoped>
.box {
  display: inline-block;
  position: relative;
}

.span {
  position: absolute;
  right: 3px;
  bottom: 1px;
}
</style>